<template>
  <view>
    <view class="foa-dashboard-head">
      <view class="foa-dashboard-head-tab">
        <view class="foa-dashboard-head-tab-item" @click="headTabClick(1)">
          <view class="foa-dashboard-head-tab-item_icon">
            <view class="app-iconfont icon-daichuli"></view>
          </view>
          <view class="foa-dashboard-head-tab-item_title">待处理</view>
        </view>
        <view class="foa-dashboard-head-tab-item" @click="headTabClick(2)">
          <view class="foa-dashboard-head-tab-item_icon">
            <view class="app-iconfont icon-yichuli"></view>
          </view>
          <view class="foa-dashboard-head-tab-item_title">已处理</view>
        </view>
        <view class="foa-dashboard-head-tab-item" @click="headTabClick(3)">
          <view class="foa-dashboard-head-tab-item_icon">
            <view class="app-iconfont icon-wofaqide"></view>
          </view>
          <view class="foa-dashboard-head-tab-item_title">已发起</view>
        </view>
        <view class="foa-dashboard-head-tab-item" @click="headTabClick(4)">
          <view class="foa-dashboard-head-tab-item_icon">
            <view class="app-iconfont icon-chaosongwode"></view>
          </view>
          <view class="foa-dashboard-head-tab-item_title">已收到</view>
        </view>
      </view>
    </view>
    <view>
      <view style="width: 100%;">
        <u-tabs :list="oaGroup.list" v-model="oaGroup.current" @change="oaGroupChange"></u-tabs>
      </view>

      <view style="padding: 20rpx 30rpx 0">
        <u-collapse :accordion="false" :item-style="oaList.itemStyle">
          <u-collapse-item :title="item.name" v-for="(item, index) in oaList.itemList" :key="index" :open="true">

            <view class="foa-dashboard-cell">
              <view v-for="(oa, index2) in item.items" :key="index2" class="foa-dashboard-cell_row">
                <view class="foa-dashboard-cell_row_icon" :style="`background-color: ${oa.logo.background}`"><view :class="`ruoyi-${oa.logo.icon}`" ></view></view>
                <view class="foa-dashboard-cell_row_text">
                  <view class="foa-dashboard-cell_row_title">{{ oa.formName }}</view>
                  <view class="foa-dashboard-cell_row_remark">{{ oa.remark }}</view>
                </view>
              </view>
            </view>

          </u-collapse-item>
        </u-collapse>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      oaGroup: {
        list: [
          {name: '全部'},
          {name: '人事'},
          {name: '系统运维'},
          {name: '项目管理', count: 5},
          {name: '员工日常', count: 5},
        ],
        current: 0
      },
      oaList: {
        itemStyle: {
          'font-weight': 'bold',
        },
        itemList: [
          {
            "id": "2",
            "name": "人事",
            "items": [
              {
                "formId": "1793190995113992192",
                "tgId": 1793190995314384898,
                "formName": "请假",
                "icon": {"icon":"iconfont icon-qingjiashenqing","background":"rgba(255, 69, 0, 0.68)"},
                "isStop": false,
                "remark": "请假需要提前一天并告知直属上级通过后在系统发起请假流程",
                "logo": {
                  "icon": "iconfont icon-qingjiashenqing",
                  "background": "rgba(255, 69, 0, 0.68)"
                },
                "background": {"icon":"iconfont icon-qingjiashenqing","background":"rgba(255, 69, 0, 0.68)"},
                "updated": "2024年05月29日 00时:10分:26秒",
                "templateId": "1793190995113992192"
              }
            ]
          },
          {
            "id": "1293705217",
            "name": "系统运维",
            "items": []
          },
          {
            "id": "1293705220",
            "name": "员工日常事务",
            "items": []
          }
        ],
      }

    }
  },
  onLoad() {
    // 如果缓存中不存在token时
    if (!this.$store.state.user.token) {
      uni.redirectTo({
        url: '/pages/login/index'
      });
    }
  },
  methods: {
    headTabClick(index) {
      console.log(index)
    },
    oaGroupChange(index) {
      console.log(index)
    }
  }
}
</script>

<style scoped lang="scss">
.foa-dashboard-head {
  width: 100%;
  height: 12.5vh;
  background-color: #f8f8f8;

  .foa-dashboard-head-tab {
    display: flex;
    padding-top: 2vh;

    .foa-dashboard-head-tab-item {
      width: 25%;
      padding: 20rpx 30rpx;
      text-align: center;

      .foa-dashboard-head-tab-item_title {
        padding-top: 10rpx;
        font-size: 24rpx;
      }
      .foa-dashboard-head-tab-item_icon {
        .app-iconfont {
          font-size: 58rpx;
        }
      }
    }

  }
}

.foa-dashboard-cell {
  .foa-dashboard-cell_row {
    display: flex;
    background-color: #f4f4f4;
    padding: 10rpx;
    border-radius: 10rpx;
    margin-bottom: 10rpx;

    .foa-dashboard-cell_row_icon {
      width: 80rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;

      view {
        font-size: 50rpx;
        margin-top: 15rpx;
        color: #FFFFFF;

        flex: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

      }
    }

    .foa-dashboard-cell_row_text {
      padding-top: 5rpx;
      font-weight: normal;
      width: calc(100% - 90rpx);
    }
    .foa-dashboard-cell_row_title {
      color: black;
      font-size: 30rpx;

    }
    .foa-dashboard-cell_row_remark {
      font-size: 24rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>